<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频发布</title>
    <link rel="stylesheet" href="../static/css/postVideo.css" th:href="@{/css/postVideo.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
</head>

<body>
<form class="video-publish-form" th:action="@{/videosDescription/add}" method="POST" enctype="multipart/form-data">

    <input type="file" id="video"  style="display: none"   >
    <input type="text" id="video2"  style="display: none"  th:value="${videoUrl}" name="videoUrl">
    <div class="form-group ">
        <label for="title">标题</label>
        <input type="text" id="title"  maxlength="50" placeholder="请填写标题(最多50字)" name="title">
        <span class="char-count">0/50</span>
    </div>
    <div class="form-group">
        <label for="description">简介</label>
        <textarea id="description" placeholder="填写视频简介，让更多人找到你的视频(最多800字)" maxlength="800" name="description"></textarea>
        <span class="char-count2 char-count">0/800</span>
    </div>
    <div class="form-group">
        <label>视频</label>
        <div class="cover-container-outer">
        <div class="cover-container">
            <!-- 视频显示区域（有视频时显示） -->
            <div class="video-preview" style="display: none;">
                <video controls style="object-fit: contain; width: 100%; height: 100%;">
                    <source th:src="${videoUrl}" type="video/mp4" class="source">
                    您的浏览器不支持视频播放。
                </video>

            </div>

            <!-- 上传提示区域（无视频时显示） -->
            <div class="cover-upload-placeholder" id="coverUploadPlaceholder">
                + 添加视频
            </div>
        </div>
        <button id="deleteButton" type="button"><i class="iconfont">&#xe61d;</i></button>
        </div>
    </div>
    <div class="form-group">
        <label for="category">标签 *</label>
        <select id="category" name="tagName">
            <option value="">选择标签</option>
            <option value="健康">健康</option>
            <option value="娱乐">娱乐</option>
            <option value="历史">历史</option>
            <option value="宠物">宠物</option>
            <option value="技术">技术</option>
            <option value="摄影">摄影</option>
            <option value="教育">教育</option>
            <option value="旅行">旅行</option>
            <option value="理财">理财</option>
            <option value="生活">生活</option>
            <option value="科技">科技</option>
            <option value="美食">美食</option>
            <option value="职场">职场</option>
            <option value="艺术">艺术</option>
            <option value="行业">行业</option>
            <option value="运动">运动</option>
            <option value="阅读">阅读</option>
            <option value="音乐">音乐</option>

        </select>
    </div>


    <div class="form-actions">
        <button type="button" id="cancelButton">取消发布</button>
        <button type="submit" id="publishButton">发布视频</button>

    </div>
</form>
<script th:inline="javascript">


    // // 拦截表单提交
    // document.querySelector('.video-publish-form').addEventListener('submit', function(e) {
    //     e.preventDefault(); // 阻止表单默认提交行为
    //
    //     // 收集表单数据
    //     const formData = new FormData(this);
    //
    //     // 打印普通字段
    //     console.log('表单提交的数据:');
    //     for (let pair of formData.entries()) {
    //         console.log(pair[0] + ': ' + pair[1]);
    //     }
    // })

    const cancelButton=document.getElementById('cancelButton')
    cancelButton.addEventListener('click',(e)=>{
        e.preventDefault();
        if (window.history.length > 1) {
            window.history.back();
        } else {
            // 如果没有历史记录，可以跳转到首页或其他默认页面
            window.location.href = '/';
        }
    })
    // // 初始化：如果有视频 URL，显示预览
    // if (posts && posts !== '') {
    //     coverContainer.classList.add('has-video');
    //     videoInput.value = posts; // 设置隐藏字段的值
    // }

    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter = document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if (alertMessage.textContent == null) {
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }
    // 获取后端传递的 videoUrl
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 获取所有需要用到的 DOM 元素
        const titleInput = document.getElementById('title');
        const descriptionInput = document.getElementById('description');
        const source = document.querySelector('.source'); // 视频源
        const video2 = document.getElementById('video2'); // 存储视频 URL 的隐藏输入框
        const coverContainer = document.querySelector('.cover-container'); // 视频上传父容器
        const coverUploadPlaceholder = document.getElementById('coverUploadPlaceholder'); // “+添加视频”提示
        const videoPreview = document.querySelector('.video-preview'); // 视频预览区
        const videoElement = videoPreview.querySelector('video'); // 视频播放元素
        const videoInput = document.getElementById('video'); // 隐藏的文件选择框
        const deleteButton = document.getElementById('deleteButton'); // 删除视频按钮
        let videoUrl = [[${videoUrl}]];

        // 2. 标题字数统计（刷新后重新绑定）
        titleInput.addEventListener('input', function() {
            const charCount = this.value.length;
            document.querySelector('.char-count').textContent = `${charCount}/50`;
        });

        // 3. 简介字数统计（刷新后重新绑定）
        descriptionInput.addEventListener('input', function() {
            const charCount = this.value.length;
            document.querySelector('.char-count2').textContent = `${charCount}/800`;
        });

        // 4. 核心：上传区域点击事件（用事件委托，刷新后仍有效）
        // 绑定到父容器 coverContainer，点击“+添加视频”或空的预览区都能触发上传
        coverContainer.addEventListener('click', function(e) {
            // 仅当“添加提示区显示”或“预览区为空”时，才触发文件选择
            if (e.target === coverUploadPlaceholder ||
                (videoPreview.style.display === 'none' && coverContainer.contains(e.target))) {
                videoInput.click(); // 触发隐藏的文件选择框
            }
        });

        // 5. 文件选择后处理（刷新后重新绑定）
        videoInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) {
                showCustomAlert('请选择要上传的视频文件', 3000);
                return;
            }

            // 视频大小校验（5GB 限制）
            const maxSize = 5 * 1024 * 1024 * 1024; // 5GB
            if (file.size > maxSize) {
                showCustomAlert('视频文件大小不能超过5GB', 3000);
                this.value = ''; // 清空选择的文件，避免重复触发
                return;
            }

            // 生成临时 URL 预览视频
            const tempVideoUrl = URL.createObjectURL(file);
            source.src = tempVideoUrl;
            video2.value = tempVideoUrl; // 同步到隐藏输入框（提交用）
            videoElement.load(); // 重新加载视频

            // 更新 UI 状态：显示预览区、隐藏提示区、显示删除按钮
            videoPreview.style.display = 'block';
            coverUploadPlaceholder.style.display = 'none';
            deleteButton.style.display = 'flex';
        });

        // 6. 删除视频按钮逻辑（刷新后重新绑定）
        deleteButton.addEventListener('click', function() {
            // 清空视频源和隐藏输入框
            source.src = '';
            video2.value = '';
            videoElement.load();
            videoInput.value = ''; // 清空文件选择框，避免重复提交旧文件

            // 恢复 UI 状态：隐藏预览区、显示提示区、隐藏删除按钮
            videoPreview.style.display = 'none';
            coverUploadPlaceholder.style.display = 'block';
            deleteButton.style.display = 'none';
        });

        // 7. 页面刷新后的初始化：根据 videoUrl 恢复状态
        function initVideoState() {
            if (videoUrl && videoUrl.trim() !== '') {
                // 有后端传递的视频 URL：显示预览、隐藏提示
                source.src = videoUrl;
                video2.value = videoUrl;
                videoElement.load();
                videoPreview.style.display = 'block';
                coverUploadPlaceholder.style.display = 'none';
                deleteButton.style.display = 'flex';
            } else {
                // 无视频 URL：隐藏预览、显示提示
                videoPreview.style.display = 'none';
                coverUploadPlaceholder.style.display = 'block';
                deleteButton.style.display = 'none';
            }
        }

        // 8. 自定义提示框函数（确保刷新后可调用）
        function showCustomAlert(message, duration = 3000) {
            let customAlert = document.getElementById('customAlert');
            if (!customAlert) {
                // 动态创建提示框（首次调用时）
                customAlert = document.createElement('div');
                customAlert.id = 'customAlert';
                customAlert.style.cssText = `
                position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
                background: white; padding: 12px 20px; border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.1); z-index: 1000;
            `;
                const alertMessage = document.createElement('p');
                alertMessage.id = 'alertMessage';
                alertMessage.style.margin = '0';
                customAlert.appendChild(alertMessage);
                document.body.appendChild(customAlert);
            }
            // 显示提示内容
            customAlert.querySelector('#alertMessage').textContent = message;
            customAlert.style.display = 'block';
            // 自动隐藏
            setTimeout(() => {
                customAlert.style.display = 'none';
            }, duration);
        }

        // 9. 执行初始化（刷新后自动恢复视频区域状态）
        initVideoState();
    });
</script>
<script src="../static/js/postVideo.js" th:src="@{/js/postVideo.js}"></script>
</body>

</html>